<template>
  <div>
    <van-nav-bar title="评论" fixed left-arrow @click-left="$router.back()"/>
      <div class="main">
        <van-list
         v-model="loading"
         :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
           >
        <van-pull-refresh v-model="loading" @refresh="onRefresh">
        <van-cell v-for="item in list" :key="item.id">
          <div class="wrap">
            <div class="img_wrap">
              <img :src="item.user.avatarUrl" alt="">
            </div>
            <div class="content_wrap">
              <div class="header_wrap">
                <div class="info_wrap">
                  <p>{{item.user.nickname}}</p>
                  <p>{{item.item}}</p>
                </div>
                <div>{{item.likedCount}}点赞</div>
              </div>
              <div class="footer_wrap">{{item.content}}</div>
            </div>
          </div>
          </van-cell>
          </van-pull-refresh>
          </van-list>
    </div>
  </div>
</template>

<script>
import { CommentAPI } from '@/api'
export default {
  data () {
    return {
      list: [],
      loading: false,
      isloading: false,
      finished: false,
      page: 1
    }
  },
  methods: {
    onRefresh () {
      this.list = []
      this.page = 1
      this.getList()
    },
    onLoad () {
      this.page++
      this.getList()
    },
    getList () {
      CommentAPI({
        id: this.$route.query.id,
        limit: 20,
        offset: (this.page - 1) * 20
      }).then((res) => {
        this.list = [...this.list, ...res.data.comments]
        console.log(111111, this.list)
        this.loading = false
        this.isloading = false
      })
    }
  }
}
</script>

<style scoped lang="less">
 .main{
   padding-top: 46px;
 }
 .wrap{
   display: flex;
 }
 .img_wrap{
   width: 0.8rem;
   height:0.8rem;
   margin-right: 0.266667rem;
 }
 .img_wrap img{
   width: 100%;
   height:100%;
   border-radius:50%;
 }
 .content_wrap{
   flex: 1;
 }
 .header_wrap{
   display: flex;
 }
 .info_wrap{
   flex: 1;
 }
 .info_wrap p:first-child{
   font-size:0.373333rem;
   color: #666;
   }
 .info_wrap p:last-of-type{
   font-size: 0.24rem;
   color: #999;
 }
 .header_wrap div:last-of-type{
   color: #999;
   font-size: 0.293333rem;
 }
 .footer_wrap{
   font-size: 0.4rem;
   color: #333;
 }
   </style>
